<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>应急遥感专题</title>
    <link href="css/bootstrap.css" rel="stylesheet">
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/data_text.css">
    <link rel="stylesheet" type="text/css" href="../lib/layui/css/layui.css" />
    <!--引入这个才能使地图导航栏好使-->
    <link rel="stylesheet" type="text/css" href="../css/gis.css" />
    <!--<link rel="stylesheet" type="text/css" href="../css/font.css" >-->
    <link rel="stylesheet" type="text/css" href="bootstrap/slider/css/bootstrap-slider.css"/>

    <link rel="stylesheet" href="../css/mycover.css">

    <link rel="stylesheet" href="https://js.arcgis.com/3.46/esri/css/esri.css">
    <style type="text/css">
    	.layui-table tbody tr:hover, .layui-table thead tr{
    		/*background-color: rgb(8,24,50);*/
    		background-color: rgb(135, 255, 177);
    	}
    	.layui-table{
    		/*background-color: rgba(7, 41, 81, 0.85);*/
    		background-color: rgba(137, 152, 107, 0.85);
    		color: #d6dbe2;
    	}
    	.layui-table td, .layui-table th{
    		border-color: #004867;
    	}
    	body .layui-layer-title{
    		/*border-bottom: 1px solid #034c6a;*/
    		border-bottom: 1px solid #7c9d7f;
    	}
        #tl {
            position: absolute;
            left: 10px;
            bottom: 10px;
            max-height: 250px;
            min-width: 180px;
            overflow: auto;
            border-radius: 3px;
            padding: 5px;
            color: white;
            background-color: rgba(0, 0, 0, 0.7);
        }

        #tl::-webkit-scrollbar {
            display: none;
        }

        /*让图层弹窗置于右下角制定位置*/
        .layui-layer {
            z-index: 19891015;
            /* width: 345px; */
            /* height: 90px; */
            left: inherit !important;
            top: inherit !important;
            position: absolute !important;
            bottom: 20px !important;
            right: 38px !important;
        }
    </style>
</head>

<body>
    <!--content开始-->
    <div class="data_content">
        <div class="data_main">
            <div class="main_center fl">
                <div class="center_text">
                    <div class="main_title">
                        <img src="img/title_3.png" alt="">专题地图服务
                    </div>
                    <div id="mapDiv" style="width:100%;height:100%;"></div>
                    <div id="slid" style="position: absolute;z-index: 999;top: 5%;left: 30%;width: 40%; display: none">
                        <input id="ex13" type="text" style="width: 100%;" data-slider-value="0" data-slider-step="1"/>
                    </div>
                    <div style="position: absolute; right:0; top:5px; z-index: 10;">
                        <div id="navDiv1" style="float: right; overflow: hidden; padding: 0px; border: 0px;">
                            <div id="pan" class="navItem" style="margin-right: 3px; overflow: hidden; float:right;">
                                <img title="漫游" src="images/hand.png"/>
                            </div>
                            <div id="zoomnext" class="navItem">
                                <img src="images/right.png" title="后一视图"/>
                            </div>
                            <div id="zoomprev" class="navItem">
                                <img src="images/left.png" title="前一视图"/>
                            </div>
                            <div id="extent" class="navItem">
                                <img src="images/web.png" title="全图显示"/>
                            </div>
                            <div id="zoomout" class="navItem">
                                <img src="images/zoomout.png" title="地图缩小"/>
                            </div>
                            <div id="zoomin" class="navItem">
                                <img src="images/zoomin.png" title="地图放大"/>
                            </div>
                            <!--可能受到别的样式影响，下拉框显示不出，按钮先被迫隐藏-->
                            <!--<div id="measureTools" class="navItem">
                                <img src="images/ruler.png" title="地图测量" class="measure-distance"/>
                            </div>-->
                        </div>
                    </div>
                    <div id="tl">
                        <div id="legend"></div>
                    </div>
                </div>
            </div>
            <!--<div class="main_right fr">
                <div class="up">
                    <div class="main_title">
                        <img src="img/title_5.png" alt=""> 站点报警率统计
                    </div>
                    <div id="chart_4" class="echart fl" style="width:100%;height: 100%;"></div>
                </div>
                <div class="up">
                    <div class="main_title">
                        <img src="img/title_4.png" alt=""> 站点报警状况
                    </div>
                    <div class="main_table">
                        <table>
                            <thead>
                                <tr>
                                    <th>序号</th>
                                    <th>站点</th>
                                    <th>状态</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td>1</td>
                                    <td>珲春中俄公路口岸</td>
                                    <td>正常</td>
                                </tr>
                                <tr>
                                    <td>2</td>
                                    <td>珲春圈河中朝口岸</td>
                                    <td>正常</td>
                                </tr>
                                <tr>
                                    <td>3</td>
                                    <td>珲春沙坨子中朝口岸</td>
                                    <td>正常</td>
                                </tr>
                                <tr>
                                    <td>4</td>
                                    <td>珲春中俄铁路口岸</td>
                                    <td>正常</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
                <div>
                    <div class="main_title">
                        <img src="img/title_2.png" alt=""><span style="font-size:0.8em;">潜在安全风险等级</span>
                    </div>
                    <div id="chart_1" class="echart" style="width:100%;height: 100%;"></div>
                </div>
            </div>-->
        </div>
    </div>
    </div>
    <!--content结束-->
</body>
<script>
    var curPath = window.document.location.href;
    var package_path = curPath.substring(0, curPath.lastIndexOf("/"));
    var dojoConfig = {
        packages: [{
            name: 'measure',
            location: package_path + '/../lib/measure'
        }],
        parseOnLoad: false
    };
</script>
<script src="js/jquery-2.2.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<!--<script src="js/echarts.min.js"></script>-->
<!--<script src="js/echart.js"></script>-->
<script type="text/javascript" src="../lib/layer/layer.js"></script>
<script type="text/javascript" src="../lib/layui/layui.js"></script>
<script type="text/javascript" src="bootstrap/js/bootstrap.js"></script>
<script type="text/javascript" src="bootstrap/slider/bootstrap-slider.js"></script>
<script src="https://js.arcgis.com/3.46/init.js"></script>
<script type="text/javascript">
var map;
//var layBasic;
var layBasic1;
var legend;
var navToolbar, navOption;
var idx;
var pickedId;  //选中图形的ID，作为全局变量，供子窗口使用
var objectIds = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
require(["dojo/dom",
    "dojo/query",
    "dojo/on",
    "esri/map",
    "esri/dijit/OverviewMap",
    "esri/toolbars/navigation",
    "esri/layers/FeatureLayer",
    "esri/layers/ArcGISDynamicMapServiceLayer",
    "esri/layers/ArcGISTiledMapServiceLayer",
    "esri/InfoTemplate",
    "measure/MeasureTools",
    "esri/dijit/Legend",
    "dojo/domReady!"
], function(
    dom,
    query,
    on,
    Map,
    OverviewMap,
    Navigation,
    FeatureLayer,
    ArcGISDynamicMapServiceLayer,
    ArcGISTiledMapServiceLayer,
    InfoTemplate,MeasureTools,Legend) {
    // 以下是创建地图与加入底图的代码
    map = new Map("mapDiv", {
        logo: false,
        slider:false
    });

    var baseLay = new ArcGISTiledMapServiceLayer("http://202.111.178.10:61236/arcgis/rest/services/71KT5/ZCBJ_Imagery/MapServer",{id:"影像底图"});
    //var baseLay_JL = new ArcGISDynamicMapServiceLayer("http://202.111.178.10:34576/arcgis/rest/services/STBHHX/JL_Sat_GE15m/MapServer",{id:"影像底图"});
    var layBasic = new ArcGISDynamicMapServiceLayer("http://202.111.178.10:61236/arcgis/rest/services/71KT5/ForestFireArea_China_and_RussiaBorder/MapServer",{id:"中俄边境森林过火区域"});
    var lyr2 = new ArcGISDynamicMapServiceLayer("http://202.111.178.10:61236/arcgis/rest/services/71KT5/Forest_FireRiskGradeAssessment_Yanbian/MapServer",{id:"延边州火灾风险等级评估",visible:false});
    var lyr3 = new ArcGISDynamicMapServiceLayer("http://202.111.178.10:61236/arcgis/rest/services/71KT5/Forest_SurfaceTemperature_Yanbian/MapServer",{id:"延边林地地表温度",visible:false});
    //var lyr_vector = new ArcGISDynamicMapServiceLayer("http://202.111.178.10:34576/arcgis/rest/services/KouAn/kouan_features/MapServer",{id:"珲春市矢量图层",visible:true});
    var lyr_vector = new ArcGISDynamicMapServiceLayer("http://202.111.178.10:61236/arcgis/rest/services/71KT5/HunchunFeatures/MapServer/",{id:"珲春市矢量图层",visible:true});
    //var jclay = new FeatureLayer("http://202.111.178.10:34576/arcgis/rest/services/KouAn/kouan_features/MapServer/0", {
    var jclay = new FeatureLayer("http://202.111.178.10:61236/arcgis/rest/services/71KT5/HunchunFeatures/MapServer/0", {
        outFields: ["*"]
        ,id:"珲春市各口岸"
    });

    map.addLayer(baseLay, 0);
    //map.addLayer(baseLay_JL, 1);
    map.addLayer(layBasic);
        layBasic.setVisibleLayers([0]);
    map.addLayer(lyr2);
    map.addLayer(lyr3);
    map.addLayer(lyr_vector);
    map.addLayer(jclay);

    //var point = new esri.geometry.Point({ "x": 110.754, "y": 19.619, "spatialReference": { "wkid": 4326 } });
    var point = new esri.geometry.Point({ "x": 130.61, "y": 42.54, "spatialReference": { "wkid": 4326 } });
    map.centerAndZoom(point, 10);
    map.on("load", function(argument) {
        setEye();
        showLegend();
        navToolbar = new Navigation(map);
        query(".navItem img").onclick(function (evt) {
            navEvent(evt.target.parentNode.id);
        });
        // 将漫游设置为默认操作
        navEvent('deactivate');
    });

    //点击对应口岸弹出相关信息
    jclay.on("click", function(evt) {
        var name = evt.graphic.attributes.name;
        console.log(name,"点中了哪个口岸？");
        var id = evt.graphic.attributes.OBJECTID;
        console.log(id,"点中的口岸的图形Id？"); //圈河1，沙坨子2，珲春（长岭子）3
        layer.closeAll();
        var kid = "HC";
        switch (id){
            case 1:
                kid = "QH";
                break;
            case 2:
                kid = "STZ";
                break;
            case 3:
                kid = "HC";
                break;
        }
        layer.open({
            skin: 'demo-class',
            title: name,
            type: 1,
            offset: [evt.y, evt.x],
            area: ['550px', ''],
            shadeClose: true,
            shade: false,
            //content: document.getElementById("tmap").innerHTML,
            content: document.getElementById(kid).innerHTML,
        });
        //showchart(cdata[id]);  //不必再更改图表
    });

    layBasic.on("load", function() {
        var layerString = '';
        layerString += '<input type="checkbox" id="' + baseLay.id + '" title="' + baseLay.id + '" lay-skin="primary"' + (baseLay.visible ? " CHECKED " : "") + '><br>';
        layerString += '<input type="checkbox" id="' + layBasic.id + '" title="' + layBasic.id + '" lay-skin="primary"' + (layBasic.visible ? " CHECKED " : "") + '><br>';
        layerString += '<input type="checkbox" id="' + lyr2.id + '" title="' + lyr2.id + '" lay-skin="primary"' + (lyr2.visible ? " CHECKED " : "") + '><br>';
        layerString += '<input type="checkbox" id="' + lyr3.id + '" title="' + lyr3.id + '" lay-skin="primary"' + (lyr3.visible ? " CHECKED " : "") + '><br>';
        layerString += '<input type="checkbox" id="' + lyr_vector.id + '" title="' + lyr_vector.id + '" lay-skin="primary"' + (lyr_vector.visible ? " CHECKED " : "") + '><br>';
        layerString += '<input type="checkbox" id="' + jclay.id + '" title="' + jclay.id + '" lay-skin="primary"' + (jclay.visible ? " CHECKED " : "") + '><br>';
        console.log(layerString,"layerString");
        idx = layer.open({
            //skin: 'demo-class',
            title: '图层',
            closeBtn: 0,
            type: 1,
            //area: ['345px', ''],
            area: ['', ''],
            //offset: 'rb',
            shadeClose: true,
            shade: false,
            content: '<div class="layui-form">' +
            layerString +
            '</div>',
            success: function() {
                startTC();
            }
        });
        /*var bLayers = veclay.layerInfos;
        $.ajax({
            url: "http://202.111.178.10:34576/arcgis/rest/services/KouAn/kouan_features/MapServer/legend?f=pjson",
            url: "http://202.111.178.10:61236/arcgis/rest/services/71KT5/HunchunFeatures/MapServer/legend?f=pjson",
            type: "GET",
            dataType: "jsonp",
            success: function(data) {
                var lgl = data.layers;
                //console.log(data);
                var baseurl = "data:image/png;base64,";
                layerString += '<input type="checkbox" id="' + ZCBJ_Imagery.id + '" title="' + ZCBJ_Imagery.id + '" lay-skin="primary"' + (ZCBJ_Imagery.visible ? " CHECKED " : "") + '><br>';
                for (var i = 0; i < bLayers.length; i++) {
                    var currentSubLayer = bLayers[i];
                    var nexturl = lgl[i].legend[0].imageData;
                    layerString += '<img src="' + baseurl + nexturl + '">' + '<input type="checkbox" id="' + currentSubLayer.id + '" title="' + currentSubLayer.name + '" lay-skin="primary"' + (currentSubLayer.defaultVisibility ? " CHECKED " : "") + '><br>';
                }
                idx = layer.open({
                    //skin: 'demo-class',
                    title: '图层',
                    closeBtn: 0,
                    type: 1,
                    area: ['345px', ''],
                    offset: 'rb',
                    shadeClose: true,
                    shade: false,
                    content: '<div class="layui-form">' +
                    layerString +
                    '</div>',
                    success: function() {
                        startTC();
                    }
                });
                /!*layer.style(idx, {
                 color:'red'
                 });*!/
            }
        });*/

    });
    function startTC() {
        layui.use('form', function() {
                var form = layui.form;
                form.render();
                form.on('checkbox', function(data) {
                    console.log(data);
                    if (data.elem.id == "影像底图") {
                        if (data.elem.checked) {
                            baseLay .setVisibility(true);
                            return;
                        } else {
                            baseLay .setVisibility(false);
                            return;
                        }
                    }
                    if (data.elem.id == "中俄边境森林过火区域") {
                        if (data.elem.checked) {
                            layBasic .setVisibility(true);
                            return;
                        } else {
                            layBasic .setVisibility(false);
                            return;
                        }
                    }
                    if (data.elem.id == "延边州火灾风险等级评估") {
                        if (data.elem.checked) {
                            lyr2 .setVisibility(true);
                            return;
                        } else {
                            lyr2 .setVisibility(false);
                            return;
                        }
                    }
                    if (data.elem.id == "延边林地地表温度") {
                        if (data.elem.checked) {
                            lyr3 .setVisibility(true);
                            return;
                        } else {
                            lyr3 .setVisibility(false);
                            return;
                        }
                    }
                    if (data.elem.id == "珲春市矢量图层") {
                        if (data.elem.checked) {
                            lyr_vector .setVisibility(true);
                            return;
                        } else {
                            lyr_vector .setVisibility(false);
                            return;
                        }
                    }
                    if (data.elem.id == "珲春市各口岸") {
                        if (data.elem.checked) {
                            jclay .setVisibility(true);
                            return;
                        } else {
                            jclay .setVisibility(false);
                            return;
                        }
                    }

                    /*var checkedId = [];
                    var checkedLayer = $(".layui-form-checked");
                    for (var i = 0; i < checkedLayer.length; i++) {
                        checkedId.push(checkedLayer[i].previousSibling.id);
                    }
                    veclay.setVisibleLayers(checkedId);*/
                });
            });
    }

    //设置鹰眼
    function setEye() {
        var overviewMap = new OverviewMap({
            map: map,
            attachTo: "top-left"
        });
        overviewMap.startup();
    }
    //测量工具
    var measureTool = new MeasureTools({
        map: map
    }, "measureTools");

    //region多期影像滑动条
        document.getElementById("slid").style.display = "block";
        var mySlider = $("#ex13").slider({
            ticks: [0, 1, 2, 3],
            //ticks_labels: [0,1,2,3,4,5,6],
            ticks_snap_bounds: 1,
            formatter: function (value) {
                switch (value) {
                    case 0:
                        return '2017年3月21日';
                    case 1:
                        return '2017年4月13日';
                    case 2:
                        return '2017年4月22日';
                    case 3:
                        return '2017年4月29日';
                }
            }
        }).on("change", function (e) {
            switch (e.value.newValue) {
                case 0:
                    layBasic.setVisibleLayers([0]);
                    legend.refresh();
                    break;
                case 1:
                    layBasic.setVisibleLayers([1]);
                    legend.refresh();
                    break;
                case 2:
                    layBasic.setVisibleLayers([2]);
                    legend.refresh();
                    break;
                case 3:
                    layBasic.setVisibleLayers([3]);
                    legend.refresh();
                    break;
            }
        });
    //endregion

    var legendSet = [];
    legendSet.push(
        /*{
            defaultSymbol:true,
            hideLayers:[], //隐藏子图层
            layer:layBasic, //要显示图例的图层
            title:" " //要显示的图例Title
        },*/
        /*{
            defaultSymbol:true,
            hideLayers:[], //隐藏子图层
            layer:lyr_vector, //要显示图例的图层
            title:" " //要显示的图例Title
        },*/
        {
            defaultSymbol:true,
            hideLayers:[], //隐藏子图层
            layer:jclay, //要显示图例的图层
            title:"珲春各口岸" //要显示的图例Title
        },
        {
            defaultSymbol:true,
            hideLayers:[], //隐藏子图层
            layer:lyr2, //要显示图例的图层
            title:" " //要显示的图例Title
        },
        {
            defaultSymbol:true,
            hideLayers:[], //隐藏子图层
            layer:lyr3, //要显示图例的图层
            title:" " //要显示的图例Title
        }
    );

    //图例
    function showLegend() {
        legend = new Legend({
            map: map,
            layerInfos:legendSet,
            autoUpdate: true
            /*layerInfos: [
                {
                    layer: layBasic,
                    title: "图例"
                }]*/
        }, "legend");
        legend.startup();
        legend.refresh();
    }

    //地图工具
    function navEvent(id) {
        map.graphics.clear();
        switch (id) {
            case 'pan':
                map.enablePan();
                navToolbar.activate(Navigation.PAN);
                navOption = id;
                break;
            case 'zoomprev':
                navToolbar.zoomToPrevExtent();
                break;
            case 'zoomnext':
                navToolbar.zoomToNextExtent();
                break;
            case 'extent':
                navToolbar.zoomToFullExtent();
                break;
            case 'zoomin':
                navToolbar.activate(Navigation.ZOOM_IN);
                navOption = id;
                break;
            case 'zoomout':
                navToolbar.activate(Navigation.ZOOM_OUT);
                navOption = id;
                break;
            case 'deactivate':
                navToolbar.deactivate();
                navOption = id;
                break;
        }
    }
});
</script>
<div type="text/html" id="QH" style="display: none;">
   <img src="../images/kouan/QH.jpg" width="550">
</div>
<div type="text/html" id="STZ" style="display: none;">
    <img src="../images/kouan/STZ.jpg" width="550">
</div>
<div type="text/html" id="HC" style="display: none;">
    <img src="../images/kouan/HC.jpg" width="550">
</div>

</html>